<script setup>
import { ref, computed, onMounted } from 'vue'
import {close, connect} from '../utils/websocket.js'
import Player1Info from "../components/battle/Player1Info.vue";
import Player2Info from "../components/battle/Player2Info.vue";
import Player1Pick from "../components/battle/Player1Pick.vue";
import Player2Pick from "../components/battle/Player2Pick.vue";
import SearchPick from "../components/battle/SearchPick.vue";
import api from "../utils/api.js";
import {ElMessageBox} from "element-plus";
import router from "../router/router.js";
import {getGamePetsPick, getGameStateSymmetry, getGameStateUnilateral} from "../utils/banpickCall.js";
import store, {cosSource} from "../store/store.js";
import {initUser} from "../utils/commonFunc.js";
import ActionFooter from "../components/battle/ActionFooter.vue";

const gameId = computed(() => store.state.game.unilateral.game_id)

const exitGame = () => {

  ElMessageBox.confirm(
    '确定退出？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    close()
    api.get('/game/exitGame').then(res => {
      router.push({ name: 'Hall' })
    })
  }).catch(() => {
  })
}

onMounted(() => {
  getGameStateUnilateral().then(res => {
    getGameStateSymmetry()
    getGamePetsPick()
  })
  connect()
  initUser()
})
</script>

<template>
  <div style="display: flex" :style="{backgroundRepeat: 'round', backgroundImage: `url('${cosSource}UI/background.png')`}">
    <div class="battle-container">
      <div class="battle-header">
        <Player1Info />
        <div style="width: 30%; height: 100%;">
          <div style="width: 100%; height: 70%; display: flex; justify-content: center;">
            <div :style="{
              height: '100%', width: '30%', backgroundImage: `url('${cosSource}UI/VS.png')`, backgroundRepeat: 'round'
            }" />
          </div>
          <div style="height: 30%; display: flex; justify-content: center;">
            <span style="color: white; font-size: large;">
              房间号：{{ gameId }}
            </span>
          </div>
        </div>
        <Player2Info />
      </div>
      <div class="battle-content">
        <Player1Pick />
        <div class="search-content" :style="{backgroundImage: `url('${cosSource}UI/middelBox.png')`}">
          <SearchPick />
          <ActionFooter />
        </div>
        <Player2Pick />
      </div>
    </div>
    <div style="width: 30px">
      <el-button @click="exitGame">x</el-button>
    </div>
  </div>
</template>

<style scoped>
.battle-container {
  height: 98vh;
  width: 95vw;
}
.search-content {
  display: block;
  width: 78%;
  height: 95%;
  background-repeat: round;
}
.battle-header {
  display: flex;
  height: 20%;
}
.battle-content {
  display: flex;
  height: 80%;
}
</style>